import React, {forwardRef, useEffect, useImperativeHandle, useState,} from "react";
import {message, Modal, Tree} from "antd";
import type {DataNode, TreeProps} from 'antd/es/tree';
import {getAllMenus} from "../../../api/modules/menu";
import * as Icons from '@ant-design/icons'
import {getRoleMenu, setRoleMenu} from "../../../api/modules/role";

const ModalCom = (props: any, ref: any) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [treeData,setTreeData] = useState<DataNode[]>([])
    const [selectedKeys, setSelectedKeys] = useState<any>();
    const [defaultCheckedKeys, setDefaultCheckedKeys] = useState<any>([]);
    const [checkedKeys, setCheckedKeys] = useState<any>([]);
    const [roleId, setRoleId] = useState<number>(0);
    // const [treeData, setTreeData] = useState([]);
    useImperativeHandle(ref, () => {
        return {
            showModal: showModal,
        };
    });
    type FieldType = {
        username?: string;
        password?: string;
    };
    const showModal = async (record: any) => {
        setRoleId(record.id)
        const {data} =  await getRoleMenu(record.id);
        setCheckedKeys(data);
        setIsModalOpen(true);
    };

    const handleOk = async () => {
        const {code}  = await setRoleMenu(roleId,selectedKeys)
        if(code === 200){
            message.success("绑定成功");
            setIsModalOpen(false)
        }else{
            message.error("绑定失败")
        }
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
        setSelectedKeys(checkedKeys)
        setCheckedKeys(checkedKeys)
    };
    const customIcon : {[key:string] : any} = Icons
    const getIcon = (name:string )=>{
        if(name){
            return React.createElement(customIcon[name])
        }else {
            return React.createElement(customIcon["SmileOutlined"])
        }

    }
    const getTreeData = async ()=>{
        const { data } = await getAllMenus()
        if(Array.isArray(data)){
            addIcon(data)
            setTreeData(data as DataNode[]);
        }
    }
    const addIcon = (arr:DataNode[])=>{
        arr.forEach((item:DataNode)=>{
            item.icon = getIcon(item.icon as any)
            if(item.children && item.children.length){
                addIcon(item.children);
            }
        })
    }
    useEffect(()=>{
        getTreeData()
       // const {data} = await getAllMenus()
       //  setTreeData(data);
    },[])
    return (
        <>
            <Modal
                title="Basic Modal"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Tree
                    checkable
                    showIcon
                    defaultCheckedKeys={defaultCheckedKeys}
                    checkedKeys={checkedKeys}
                    onCheck={onCheck}
                    treeData={treeData}
                    fieldNames={{title:'name',key:'id'}}
                />
            </Modal>
        </>
    );
};

export default forwardRef(ModalCom);
